<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3转换</title>
</head>
<body>
<div id="item" class="item"></div>

<!--3D盒子-->
<div class="box">
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
</div>
</body>
</html>

<script>
    let sk = 0
    let dom = document.getElementById("item");
    dom.addEventListener("click",  (e) => {
        sk += 50
        console.log(dom)
        dom.setAttribute("style", "-webkit-transform:translateY(" + sk + "px)");
    })
</script>

<style type="text/css">
    .item{
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 50px;
        background-color: indianred;
    }
    /*.item:hover{*/
    /*    -webkit-transform: translateY(50px);*/
    /*}*/
    .box > div{
        height: 90px;
        width: 90px;
        text-align:center;
        position:absolute;
        font-size: 30px;
        line-height: 90px;
    }
    .box > div:nth-child(1) {
        -webkit-transform: translateZ(45px) rotateY(0deg);
        background-color: wheat;
        top: 25px;
    }
    .box > div:nth-child(2) {
        -webkit-transform: translateX(45px) rotateY(90deg);
        background-color: blueviolet;
        top: 25px;
    }
    .box > div:nth-child(3) {
        -webkit-transform: translateZ(-45px) rotateY(180deg);
        background-color: aquamarine;
        top: 25px;
    }
    .box > div:nth-child(4) {
        -webkit-transform: translateX(-45px) rotateY(270deg);
        background-color: cornflowerblue;
        top: 25px;
    }
    .box > div:nth-child(5) {
        -webkit-transform: translateY(-45px) rotateX(-90deg);
        background-color: cadetblue;
        top: 25px;
    }
    .box > div:nth-child(6) {
        -webkit-transform: translateY(45px) rotateX(90deg);
        top: 25px;
        background-color: darkgoldenrod;
    }




    .box{
        height: 90px;
        width: 90px;
        -webkit-transform-style: preserve-3d;   /** 3D盒子 */
        -webkit-transform: rotateX(0deg);
        transition: 5s;
    }
    .box:hover{
        -webkit-transform: rotateY(360deg) rotateX(360deg);
    }
</style>